import { useEffect, useState } from 'react'
import {
  Modal,
  NavBar,
  Icon,
  List,
  InputItem,
  Button,
  WhiteSpace,
  WingBlank,
  Toast,
} from 'antd-mobile'
import { Link } from 'react-router-dom'

import { reqPhoneExist } from '../../../api/register'
import { phoneReg } from '../../../utils/regs'

import './index.less'

const alert = Modal.alert

export default function RegisterPhone({ history, location }) {
  //区号
  const countryCode = location.state || '+86'
  //手机号
  const [phone, setPhone] = useState('')
  //按钮是否禁用
  const [btnDisabled, setBtnDisabled] = useState(true)

  useEffect(() => {
    //从国家区号组件返回时不弹框
    if (location.state) {
      return
    }
    //挂载完成弹出框
    alert(
      '注册协议及隐私政策',
      <div className="policy-content">
        <span>
          在您注册成为硅谷用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，
        </span>
        <span className="policy-strong">
          请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）
        </span>
        <div className="policy-text">《硅谷用户注册协议》</div>
        <div className="policy-text">《硅谷隐私政策》</div>
      </div>,
      [
        {
          text: '不同意',
          onPress: () => history.push('/login/code'),
          style: 'default',
        },
        {
          text: '同意',
          style: { backgroundColor: '#e94f4f', color: '#fff' },
        },
      ]
    )
  }, [history, location.state])

  //手机号改变触发事件
  const phoneChangeHandle = (val) => {
    phoneReg.test(val) ? setBtnDisabled(false) : setBtnDisabled(true)
    setPhone(val)
  }

  //手机号是否注册
  const phoneExist = async () => {
    try {
      const res = await reqPhoneExist(phone)
      if (res.data.code === 20000) {
        history.push('/register/code', phone)
      } else {
        Toast.fail('手机号已注册过...', 2)
      }
    } catch (err) {
      Toast.fail('请求失败...', 2)
    }
  }

  //若同意发送验证码,先进行验证手机号是否注册
  const nextHandle = () => {
    alert('', `我们将发送短信/语音验证码至：${phone}`, [
      {
        text: '不同意',
      },
      {
        text: '同意',
        onPress: phoneExist,
        style: { backgroundColor: '#e94f4f', color: '#fff' },
      },
    ])
  }

  return (
    <div className="register-phone">
      <NavBar
        mode="light"
        icon={<Icon type="left" className="icon-left" />}
        onLeftClick={() => history.push('/login/code')}
      >
        硅谷注册
      </NavBar>
      <WingBlank size="lg">
        <WhiteSpace size="xl" />
        <List>
          <InputItem
            placeholder="请输入手机号"
            value={phone}
            onChange={phoneChangeHandle}
            clear
          >
            <Link
              to="/countryPicker/register"
              className="register-phone-prefix"
            >
              <span>{countryCode}</span>
              <span>
                <Icon type="down"></Icon>
              </span>
            </Link>
          </InputItem>
        </List>
        <WhiteSpace size="xl" />
        <Button
          disabled={btnDisabled}
          type="primary"
          className="btn"
          onClick={nextHandle}
        >
          下一步
        </Button>
      </WingBlank>
    </div>
  )
}
